<template>
    <!-- 图片列表 -->
    <scroll-view class="list-wrap" v-if="albumList.length > 0" scroll-y="true" :style="{ height: scrollHight }">
        <view class="list" v-for="(item, index) in albumList" :key="index">
            <view class="photo-date-select">
                <view class="date">{{ computeTime(item.date) }}</view>
                <view class="selectAll" @click="selectAll(index, item)" v-if="showSelectItem">全选</view>
            </view>
            <view class="photo-list">
                <view class="item" v-for="(item2, index2) in item.photos" :key="index2" @click="chooseImage(item2)">
                    <view class="select" :class="{ selected: item2.selected }" v-show="showSelectItem" ></view>
                    <LazyImage class="lazy-image" :imageStyle="imageStyle" :mode="mode" :src="item2.image_url_t" ></LazyImage>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script>
import { getMonthAndDay } from '@/common/utils.js';
import LazyImage from '@/components/LazyImage/index.vue';
export default {
    name: '',
    data() {
        return {
            albumList: [],
            mode: 'aspectFill',
            imageStyle: {
                width: '100%',
                height: '100%',
                borderRadius: '10rpx'
            }
        };
    },
    props: {
        photosList: {
            type: Array,
            default: function() {
                return [];
            }
        },
        showSelectItem: {
            type: Boolean,
            default: false
        },
        scrollHight: {
            type: String,
            default: '500px'
        }
    },
    computed: {},
    mounted() {},
    onLoad() {},
    onShow() {},
    methods: {
        computeTime(date) {
            return getMonthAndDay(date);
        },
        selectAll(index, item) {
            let list = this.albumList[index].photos;
            let selectAll = list.every(item => {
                return item.selected;
            });
            list.forEach(item => {
                item.selected = !selectAll;
            });
            this.$emit('selectedPhotos', this.albumList);
        },
        // 选中照片
        chooseImage(item){
            if(this.showSelectItem){
                item.selected = !item.selected;
                this.$emit('selectedPhotos', this.albumList);
            }else{
                this.$emit('gotoPreView', item);
            }
        },
    },
    watch: {
        photosList: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.albumList = newVal;
                }
            },
            immediate: true,
            deep: true
        }
    },
    components: {
        LazyImage
    }
};
</script>
<style lang="scss" scoped>
.list-wrap {
    width: 750rpx;
    .list {
        width: 100%;
        .photo-date-select {
            display: flex;
            height: 50rpx;
            padding: 30rpx;
            background-color: #f7f8f9;
            color: #abb3b8;
            font-size: 24rpx;
            line-height: 24rpx;
            justify-content: space-between;
            align-items: center;
            .selectAll {
                color: #20bf64;
            }
        }
        .photo-list {
            padding: 30rpx 0 0 30rpx;
            display: flex;
            flex-wrap: wrap;
            .item {
                flex-shrink: 0;
                width: 210rpx;
                height: 140rpx;
                background-color: #c3c3c3;
                border-radius: 10rpx;
                margin-bottom: 30rpx;
                margin-right: 30rpx;
                position: relative;
                .select {
                    position: absolute;
                    right: 10rpx;
                    top: 10rpx;
                    width: 32rpx;
                    height: 32rpx;
                    background-color: #000000;
                    border: solid 2rpx #ffffff;
                    border-radius: 100%;
                    box-sizing: border-box;
                    z-index: 4;
                    &::after {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 200%;
                        height: 200%;
                        content: '';
                        transform: translate(-50%, -50%);
                    }
                }
                .selected {
                    background-image: url(@/pages/minePages/static/cloudAlbum/selected.png);
                    background-size: cover;
                    border: none;
                }
                .lazy-image {
                    width: 210rpx;
                    height: 140rpx;
                    border-radius: 10rpx;
                }
            }
        }
    }
}
</style>
